<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link href="views/css/lib/chartist/chartist.min.css" rel="stylesheet">
	<link href="views/css/lib/owl.carousel.min.css" rel="stylesheet" />
	<link href="views/css/lib/owl.theme.default.min.css" rel="stylesheet" />
    <link href="views/css/helper.css" rel="stylesheet">
    <link href="views/css/style.css" rel="stylesheet">
	<title>Insert title here</title>
</head>
<body>
       <!-- Bread crumb -->
       <div class="row page-titles">
           <div class="col-md-5 align-self-center">
               <h3 class="text-primary">Dashboard</h3> </div>
           <div class="col-md-7 align-self-center">
               <ol class="breadcrumb">
                   <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                   <li class="breadcrumb-item active">Dashboard</li>
               </ol>
           </div>
       </div>
       <!-- End Bread crumb -->
       <!-- Container fluid  -->
       <div class="container-fluid">
           <!-- Start Page Content -->
           <div class="row">
               <div class="col-md-3">
                   <div class="card bg-primary p-20">
                       <div class="media widget-ten">
                           <div class="media-left meida media-middle">
                               <span><i class="ti-bag f-s-40"></i></span>
                           </div>
                           <div class="media-body media-text-right">
                               <h2 class="color-white" id="totalcount">278</h2>
                               <p class="m-b-0">正确订单数</p>
                           </div>
                       </div>
                   </div>
               </div>
               <div class="col-md-3">
                   <div class="card bg-pink p-20">
                       <div class="media widget-ten">
                           <div class="media-left meida media-middle">
                               <span><i class="ti-comment f-s-40"></i></span>
                           </div>
                           <div class="media-body media-text-right">
                               <h2 class="color-white" id="errorcount">278</h2>
                               <p class="m-b-0">错误订单数</p>
                           </div>
                       </div>
                   </div>
               </div>
               <div class="col-md-3">
                   <div class="card bg-success p-20">
                       <div class="media widget-ten">
                           <div class="media-left meida media-middle">
                               <span><i class="ti-vector f-s-40"></i></span>
                           </div>
                           <div class="media-body media-text-right">
                               <h2 class="color-white" id="totalamt">￥27647</h2>
                               <p class="m-b-0">总交易额</p>
                           </div>
                       </div>
                   </div>
               </div>
               <div class="col-md-3">
                   <div class="card bg-danger p-20">
                       <div class="media widget-ten">
                           <div class="media-left meida media-middle">
                               <span><i class="ti-location-pin f-s-40"></i></span>
                           </div>
                           <div class="media-body media-text-right">
                               <h2 class="color-white" id="maxamt">19</h2>
                               <p class="m-b-0">最大单笔交易</p>
                           </div>
                       </div>
                   </div>
               </div>
           </div>

           <div class="row">
               <div class="col-lg-6">
                   <div class="card">
                       <div class="card-title">
                           <h4>Latency (ms)</h4>
                       </div>
                       <div class="sales-chart">
                       		<div id="latency" style="height:350px"></div>
                       		<!-- <div class="ct-bar-chart" style="height:350px"></div> -->
                       </div>
                   </div>
                   <!-- /# card -->
               </div>
               <!-- /# column -->
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-title">
                        	<h4>Latency (ms)</h4>
                       	</div>
                       	<div class="sales-chart">
                       		<div id="throughput" style="height:350px"></div>
                       	</div>
                   </div>
               </div>
			</div>
			
			<div class="row">
				<div class="col-lg-12">
                    <div class="card">
                        <div class="card-title">
                            <h4>坏账记录</h4>
                        </div>
		                <div class="card-body">
							<div class="table-responsive" style="height:350px">
								<table class="table table-hover " id ="errorTable">
									<thead>
										<tr>
											<th>QQ号</th>
											<th>交易金额</th>
											<th>账户交易前余额</th>
											<th>账户交易后余额</th>
											<th>交易时间</th>
											<th>错误描述</th>
										</tr>
									</thead>
									<tbody>
									</tbody>
								</table>
							</div>
						</div>
           			</div>
           		</div>
         	</div>   
       <!-- End PAge Content -->
       </div>
       <!-- End Container fluid  -->
       <!-- footer -->
       <footer class="footer"> © 2018 All rights reserved.</footer>
       <!-- End footer -->
<!--     <script src="views/js/lib/datamap/d3.min.js"></script>
    <script src="views/js/lib/datamap/topojson.js"></script>
    <script src="views/js/lib/datamap/datamaps.world.min.js"></script>
    <script src="views/js/lib/datamap/datamap-init.js"></script>

    <script src="views/js/lib/weather/jquery.simpleWeather.min.js"></script>
    <script src="views/js/lib/weather/weather-init.js"></script>
    <script src="views/js/lib/owl-carousel/owl.carousel.min.js"></script>
    <script src="views/js/lib/owl-carousel/owl.carousel-init.js"></script>
     -->
    
<!--     <script src="views/js/lib/chartist/chartist.min.js"></script>
    <script src="views/js/lib/chartist/chartist-plugin-tooltip.min.js"></script>
    <script src="views/js/lib/chartist/chartist-init.js"></script> -->
      
    <script>
    
    $(function(){
    	/* initError() */
    	requestError()
    	requestInfo()
    });  
    
	Highcharts.setOptions({
		global: {
			useUTC: false
		}
	});
	
 	function activeLastPointToolip(chart) {
		var points = chart.series[0].points;
		chart.tooltip.refresh(points[points.length -1]);
	}
	
 	var chart = new Highcharts.Chart({
		chart: {
			renderTo: 'latency',
			type: 'spline',
			events: {
				load: requestLatency // 图表加载完毕后执行的回调函数
			}
		},
		credits: {
			enabled:false,
			text: 'dbiir',
			href: 'http://iir.ruc.edu.cn'
		},
		title: {
			text: null
		},
		xAxis: {
			type: 'datetime',
			tickPixelInterval: 150,
			maxZoom: 20 * 1000
		},
		yAxis: {
			minPadding: 0.2,
			maxPadding: 0.2,
			title: {
				text: '',
				margin: 80
			}
		},
		tooltip: {
			formatter: function () {
				return '<b>' + this.series.name + '</b><br/>' +
						Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
						Highcharts.numberFormat(this.y, 2);
			}
		},
    	exporting: {  
            enabled:false  
		},
		legend: {
			enabled: false
		},
		series: [{
			name: 'Latency',
			data: []
		}]
	});
	
	function requestLatency() {
		$.ajax({
			url: '/rest/dashboard/getTopologyInfo',
			cache: false,
			success: function(data) {
				var profile = JSON.parse(data);
			  	/* console.log(profile.topologyStats[3].completeLatency) */
			  	var x = (new Date()).getTime(), // 当前时间
				y = parseFloat(profile.topologyStats[3].completeLatency);
			    var series = chart.series[0],
			    shift = series.data.length > 20; // 当数据点数量超过 20 个，则指定删除第一个点
			
			    series.addPoint([x,y], true, shift);
			    activeLastPointToolip(chart);
			    /* document.getElementById("generateRates").innerHTML = point.value */
			
			    // 一秒后继续调用本函数
			    setTimeout(requestLatency, 1000);
			  },
		});
	}
	
 	var throughput = new Highcharts.Chart({
		chart: {
			renderTo: 'throughput',
			type: 'spline',
			events: {
				load: requestThroughput
			}
		},
		credits: {
			enabled:false,
			text: 'dbiir',
			href: 'http://iir.ruc.edu.cn'
		},
		title: {
			text: null
		},
		xAxis: {
			type: 'datetime',
			tickPixelInterval: 150,
			maxZoom: 20 * 1000
		},
		yAxis: {
			minPadding: 0.2,
			maxPadding: 0.2,
			title: {
				text: '',
				margin: 80
			}
		},
		tooltip: {
			formatter: function () {
				return '<b>' + this.series.name + '</b><br/>' +
						Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
						Highcharts.numberFormat(this.y, 2);
			}
		},
    	exporting: {  
            enabled:false  
		},
		legend: {
			enabled: false
		},
		series: [{
			name: 'Throughput',
			data: []
		}]
	});
 	
 	function initError() {
 		$.ajax({
			url: '/rest/dashboard/startConsumer',
			cache: false,
			success: function(data) {
				console.log(data);
			},
		});
 		$.ajax({
			url: '/rest/dashboard/startAgg',
			cache: false,
			success: function(data) {
				console.log(data);
			},
		});
 	}
	
	function requestThroughput() {
		$.ajax({
			url: '/rest/dashboard/getTopologyInfo',
			cache: false,
			success: function(data) {
				var profile = JSON.parse(data);
				
			  	var x = (new Date()).getTime(), // 当前时间
				y = parseFloat(profile.topologyStats[0].emitted);
			  	
			    var series = throughput.series[0],
			    shift = series.data.length > 20; // 当数据点数量超过 20 个，则指定删除第一个点
			
			    series.addPoint([x,y], true, shift);
			    activeLastPointToolip(throughput);
			
			    // 一秒后继续调用本函数
			    setTimeout(requestThroughput, 1000);
			},
		});
	}
	
 	function requestError() {
		$.ajax({
			url: '/rest/dashboard/getError',
			cache: false,
			success: function(data) {
				console.log(data)
				var newTr = "";
				$.each(data,function(id,obj){
					var objson = JSON.parse(obj)
					console.log(objson)
					newTr += "<tr><td>" + objson.FUIN + "</td><td>" + objson.FTRAN_AMT + "</td><td>" + objson.FBALANCE_OLD + "</td><td>"+ objson.FBALANCE +"</td><td>"+ objson.FTRAN_TIME +"</td><td>"+objson.DESC+"</td>";
				});
				
				$("#errorTable  tr:not(:first)").html("");
				$("#errorTable tbody").append(newTr);
				
				setTimeout(requestError, 10000);
			}
		});
	}
 	
 	function requestInfo() {
		$.ajax({
			url: '/rest/dashboard/getInfo',
			cache: false,
			success: function(data) {
				var objson = JSON.parse(data)
				console.log(objson)
 				$("#totalcount").html(objson.totalcount);
				$("#errorcount").html(objson.errorcount);
				$("#totalamt").html("￥" + objson.totalamt);
				$("#maxamt").html(objson.maxamt); 
				
				setTimeout(requestInfo, 10000);
			}
		});
	}
	
	</script>
    
    <!--Custom JavaScript -->
   <!--  <script src="views/js/custom.min.js"></script> -->
    
</body>
</html>